import { defineComponent, reactive, ref } from "vue";
const imgSrc = require("./assets/logo.png"); // eslint-disable-line
import HelloWorld from "./components/HelloWorld";

function renderHelloWorld(num: number) {
  return <HelloWorld msg="this is jsx 组件" age={num} />;
}

export default defineComponent({
  setup() {
    const state = reactive({
      name: "cuihua",
    });
    const numRef = ref(20);
    // setInterval(() => {
    //   state.name += "1";
    //   numRef.value += 1;
    // }, 1000);
    // setup中返回一个函数，这个函数会被当做组件的渲染函数（render），替换template部分
    return () => {
      const num = numRef.value;
      console.log(state.name);
      return (
        <div id="container">
          <img src={imgSrc} alt="Vue logo"></img>
          <h2>{state.name + ":" + "_" + num}</h2>
          <input type="text" v-model={state.name} />
          {/* <HelloWorld msg="hello" age={18} /> */}
          {renderHelloWorld(81)}
        </div>
      );
    };
  },
});
